<template>
  <div class="product-add">
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="200px">
      <!--添加店员-->
      <div class="common-form">
        <el-button size="mini" icon="el-icon-arrow-left" style="margin-right: 20px" @click="cancelFunc">返回</el-button>
        添加区域代理
      </div>
      <el-form-item label="区域代理名称" prop="proxy.name" :rules="[{required: true,message: ' '}]">
        <el-input class="max-w460" v-model="form.proxy.name" placeholder="区域代理名称"></el-input>
      </el-form-item>
      <el-form-item label="账号" prop="proxy.user_name" :rules="[{required: true,message: ' '}]">
        <el-input class="max-w460" v-model="form.proxy.user_name" placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item label="登录密码" prop="proxy.password" :rules="[{required: true,message: ' '}]">
        <el-input v-model="form.proxy.password" placeholder="请输入登录密码" type="password"
                  class="max-w460" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="proxy.confirm_password" :rules="[{required: true,message: ' '}]">
        <el-input v-model="form.proxy.confirm_password" placeholder="请输入确认密码" type="password"
                  class="max-w460" show-password></el-input>
      </el-form-item>
      <el-form-item label="真实姓名" prop="proxy.real_name" :rules="[{required: true,message: ' '}]">
        <el-input class="max-w460" v-model="form.proxy.real_name" placeholder="请输入真实姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" prop="proxy.mobile" :rules="[{required: true,message: ' '}]">
        <el-input class="max-w460" v-model="form.proxy.mobile" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item label="绑定地区" prop="proxy.regions" :rules="[{required: true,message: ' '}]">
        <el-cascader
          v-model="form.proxy.regions"
          :options="regionOptions"
          :props="{ multiple: true, checkStrictly: true,value:'id',label:'name' }"
          @change="regionChange"
        >
        </el-cascader>
      </el-form-item>

      <!--提交-->
      <div class="common-button-wrapper">
        <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit" :loading="loading">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import ProxyApi from '@/api/proxy.js';
import RegionApi from '@/api/region.js';

export default {
  data() {
    return {
      /*form表单数据*/
      form: {
        proxy: {
          name: "",
          user_name: "",
          password: "",
          confirm_password: "",
          real_name: "",
          mobile: "",
          regions: []
        },
      },
      regionOptions: [],
      loading:false,
    };
  },
  created() {
    /*获取列表*/
    this.getRegionOptions();
  },
  methods: {
    /*获取广告类别*/
    getRegionOptions() {
      let self = this;
      let Params = {};
      RegionApi.regionOptions(Params, true)
        .then(res => {
          self.regionOptions = res.data.regionOptions;
        })
        .catch(error => {

        });
    },
    regionChange(value) {
      console.log(this.form.proxy.regions);
    },
    onSubmit() {
      let self = this;
      let form = self.form;
      self.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          ProxyApi.addProxy(form, true)
            .then(data => {
              self.loading = false;
              if (data.code == 1) {
                self.$message({
                  message: '恭喜你，区域代理添加成功',
                  type: 'success'
                });
                self.$router.replace('/proxy/index');
              } else {
                self.loading = false;
              }
            })
            .catch(error => {
              self.loading = false;
            });
        }
      });
    },

    /*取消*/
    cancelFunc() {
      this.$router.back(-1);
    },
  }

};
</script>

<style lang="scss" scoped>
.basic-setting-content {
}

.product-add {
  padding-bottom: 50px;
}

.img {
  margin-top: 10px;
}
</style>
